<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 面试中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/interview.css" rel="stylesheet">
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li class="active">
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/dashboard" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="false" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="/applicant/personal_center">
                        <i class='bx bx-user'></i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
        </nav>
    
        <!-- 在sidebar后面添加 -->
        <div class="sidebar-overlay"></div>
    
        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="page-header">
                <h2>面试中心</h2>
{#<button class="create-interview-btn" data-bs-toggle="modal" data-bs-target="#customInterviewModal">#}
{#    <i class='bx bx-plus'></i> 创建模拟面试#}
{#</button>#}
            </div>

            <!-- 进行中的面试 -->
            <h3 class="section-title">进行中的面试</h3>
            <div class="interview-grid" id="ongoingInterviews">
                <!-- 原来的div模板别删除 -->
                <div class="interview-card active">
                    <div class="company-info">
                        <div>
                            <h4>公司名称</h4>
                            <p>岗位名称</p>
                        </div>
                    </div>
                    <div class="interview-status">
                        <span class="badge bg-success">正在进行</span>
                        <p class="time">截止日期</p>
                    </div>
                    <a class="btn btn-primary">
                        <i class='bx bx-video'></i>参加面试
                    </a>
                </div>
            </div>

            <!-- 即将开始的面试 -->
            <h3 class="section-title">未通知的面试</h3>
            <div class="interview-grid" id="upcomingInterviews">
                <!-- 原来的div模板别删除 -->
                <div class="interview-card upcoming">
                    <div class="company-info">
                        <div>
                            <h4>企业名称</h4>
                            <p>岗位名称</p>
                        </div>
                    </div>
                    <div class="interview-status">
                        <span class="badge bg-warning">等待通知</span>
                        <p class="countdown">截至时间</p>
                    </div>
                    <button class="btn btn-primary" disabled>
                        <i class='bx bx-time'></i>等待开放
                    </button>
                </div>
            </div>

            <!-- 已完成的面试 -->
            <h3 class="section-title">已完成的面试</h3>
            <div class="interview-grid" id="completedInterviews">
                <!-- 原来的div模板别删除 -->
                <div class="interview-card completed">
                    <div class="company-info">
                        <div>
                            <h4>企业名称</h4>
                            <p>岗位名称</p>
                        </div>
                    </div>
                    <div class="interview-status">
                        <span class="badge bg-secondary">已完成</span>
                        <p class="date">完成时间</p>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary">
                            <i class='bx bx-time'></i>结果
                        </button>
                    </div>
                </div>
            </div>

            <!-- 模拟面试记录 -->
<!-- 模拟面试记录 -->
{#<h3 class="section-title">模拟面试记录</h3>#}
{#<div class="interview-grid">#}
{#    <div class="interview-card simulation">#}
{#        <div class="simulation-info">#}
{#            <i class='bx bx-bot'></i>#}
{#            <div>#}
{#                <h4>前端基础知识模拟</h4>#}
{#                <p>JavaScript + Vue + React</p >#}
{#            </div>#}
{#        </div>#}
{#        <div class="interview-status">#}
{#            <span class="badge bg-info">模拟练习</span>#}
{#            <p class="date">2024-03-14 16:45</p >#}
{#        </div>#}
{#        <div class="action-buttons">#}
{#            <button class="btn btn-outline-primary">#}
{#                <i class='bx bx-play-circle'></i>查看报告#}
{#            </button>#}
{#            <button class="btn btn-outline-primary">#}
{#                <i class='bx bx-refresh'></i>再次模拟#}
{#            </button>#}
{#        </div>#}
{#    </div>#}
{#</div>#}

            <!-- 创建模拟面试的模态框 -->
            <div class="modal fade" id="customInterviewModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">创建模拟面试</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="customInterviewForm">
                                <div class="mb-3">
                                    <label class="form-label">面试方向</label>
                                    <select class="form-select">
                                        <option>前端开发</option>
                                        <option>后端开发</option>
                                        <option>全栈开发</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">技术栈</label>
                                    <div class="tech-stack-options">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="JavaScript">
                                            <label class="form-check-label">JavaScript</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="Vue">
                                            <label class="form-check-label">Vue</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="React">
                                            <label class="form-check-label">React</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">面试难度</label>
                                    <select class="form-select">
                                        <option>初级</option>
                                        <option>中级</option>
                                        <option>高级</option>
                                    </select>
                                </div>
                            </form>
                            <div class="modal-actions">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary">开始模拟面试</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/interview.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取面试列表
            fetch('/api/get_all_interviews')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const ongoingInterviews = document.getElementById('ongoingInterviews');
                        const upcomingInterviews = document.getElementById('upcomingInterviews');
                        const completedInterviews = document.getElementById('completedInterviews');

                        // 清空原有的模板内容
                        ongoingInterviews.innerHTML = '';
                        upcomingInterviews.innerHTML = '';
                        completedInterviews.innerHTML = '';

                        data.all_interviews.forEach(interview => {
                            const card = document.createElement('div');
                            card.className = 'interview-card';
                            if (interview.status === '面试中') {
                                card.classList.add('active');
                            } else if (interview.status === '已投递' || interview.status === '已查看') {
                                card.classList.add('upcoming');
                            } else {
                                card.classList.add('completed');
                            }

                            let statusText = interview.status;
                            let buttonText = interview.status === '面试中' ? '参加面试' : '等待开放';
                            let buttonDisabled = interview.status === '面试中' ? '' : 'disabled';
                            let buttonDataAppId = interview.status === '面试中' ? `data-app-id="${interview.application_id}"` : '';
                            let badgeClass = '';

                            if (interview.status === '录用') {
                                statusText = '录用';
                                buttonText = '恭喜，已被录用';
                                buttonDisabled = 'disabled';
                                buttonDataAppId = '';
                                badgeClass = 'bg-success';
                            } else if (interview.status === '拒绝') {
                                statusText = '拒绝';
                                buttonText = '不合适，未被录用';
                                buttonDisabled = 'disabled';
                                buttonDataAppId = '';
                                badgeClass = 'bg-danger';
                            } else if (interview.status === '面试中') {
                                badgeClass = 'bg-success';
                            } else if (interview.status === '已投递' || interview.status === '已查看') {
                                badgeClass = 'bg-warning';
                                buttonText = '等待通知';
                            } else {
                                badgeClass = 'bg-secondary';
                            }

                            card.innerHTML = `
                                <div class="company-info">
                                    <div>
                                        <h4>${interview.company_name}</h4>
                                        <p>${interview.job_title}</p>
                                    </div>
                                </div>
                                <div class="interview-status">
                                    <span class="badge ${badgeClass}">${statusText}</span>
                                    <p class="time">截止时间：${new Date(interview.expiration_date).toLocaleDateString()}</p>
                                </div>
                                <a class="btn btn-primary ${buttonDisabled}" ${buttonDataAppId}>
                                    ${buttonText}
                                </a>
                            `;

                            if (interview.status === '面试中') {
                                ongoingInterviews.appendChild(card);
                            } else if (interview.status === '已投递' || interview.status === '已查看') {
                                upcomingInterviews.appendChild(card);
                            } else {
                                completedInterviews.appendChild(card);
                            }
                        });

                        // 动态生成的元素需要重新绑定事件
                        bindJoinInterviewEvents();
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error fetching interview data:', error);
                    alert('获取面试数据失败');
                });
        });

        function bindJoinInterviewEvents() {
            document.querySelectorAll('.interview-card a.btn-primary').forEach(btn => {
                if (btn.hasAttribute('data-app-id')) {
                    btn.addEventListener('click', function(event) {
                        event.preventDefault();
                        const appId = btn.getAttribute('data-app-id');
                        // 这里可以添加跳转到面试房间的逻辑
                        // 发送GET请求将 application_id 传递到后端
                        fetch(`/api/applicant/interview-room?application_id=${appId}`, {
                            method: 'GET'
                        })
                        .then(response => response.json())
                        .then(data => {
                            console.log('Server response:', data); // 调试信息
                            if (data.success) {
                                // 重定向到 interview-room.html
                                window.location.href = `/applicant/TestConfig`;
                            } else {
                                alert('进入面试房间失败');
                            }
                        })
                        .catch(error => {
                            console.error('Error joining interview room:', error);
                            alert('进入面试房间失败');
                        });
                    });
                }
            });
        }
    </script>
</body>
</html>